<template>
    <div
        class="tab-item"
        :class="{ active: icon === activeIcon }"
        @click="handleClick"
    >
        <span class="iconfont" :class="[icon]"></span>
        <span class="label">{{ label }}</span>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
    icon: {
        type: String,
        required: true,
    },
    label: {
        type: String,
        default: "标签",
    },
    activeIcon: {
        type: String,
        default: "icon-home",
    },
    content: {
        type: String,
        default: "这是默认内容",
    },
});

const emit = defineEmits(["update:modelValue"]);

const handleClick = () => {
    emit("update:modelValue", props.icon);
};
</script>

<style scoped>
.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}
.tab-item .iconfont {
    font-size: 23px;
}
.tab-item .label {
    margin-top: 3px;
    font-size: 13px;
}
.active {
    color: #3494e4;
}
</style>
